<template>
    <el-card class="box-card" style="height: 460px;width: 500px;margin: 10px auto;text-align: center">
        <template #header>
            <div class="card-header">
                <span>注册</span>
            </div>
        </template>
        <el-form label-width="100px" :model="user" :rules="rules" style="display: inline-block;">
            <el-form-item label="用户名">
                <div class="div-input"><el-input v-model="user.username" placeholder="username" /></div>
            </el-form-item>
            <el-form-item label="密码">
                <div class="div-input"><el-input v-model="user.password" placeholder="password" /></div>
            </el-form-item>
            <el-form-item label="手机号" prop="phone" :rules="phoneRules">
                <div class="div-input"><el-input v-model="user.phone" placeholder="phone"/></div>
            </el-form-item>
            <div class="div-input">
                <button ref="sendBtn" @click="disabledButton" :disabled="disabled || countdown > 0">
                    {{ countdown > 0 ? `重新操作 (${countdown})` : '发送验证码' }}
                </button>
            </div>
            <el-form-item label="验证码">
                <div class="div-input"><el-input v-model="user.captcha" placeholder="captcha" /></div>
            </el-form-item>
            <button @click="reg">注册</button>

        </el-form>
    </el-card>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue';
import axios from "axios";
import qs from "qs";
import router from "@/router";
import {ElMessage} from "element-plus";

// const innerDrawer = ref(false)

const sendBtn = ref(null);
const disabled = ref(false);
const countdown = ref(0); // 修改为从本地存储中获取初始值

onMounted(() => {
    sendBtn.value = document.querySelector("[ref='sendBtn']");
    // 在页面加载时重新启动倒计时
    if (localStorage.getItem("countdown") > 0) {
        startCountdown();
    }
});

const user = ref({username:'',password:'',phone:'',captcha:''})


const rules = {
    phone: [
        { required: true, message: "手机号不能为空", trigger: "blur" },
        { pattern: /^\d{11}$/, message: "手机号必须是11位数字", trigger: "blur" },
    ],
};

const phoneRules = ref(rules.phone);

const startCountdown = () => {
    disabled.value = true;
    countdown.value = localStorage.getItem("countdown") || 60;
    const intervalObj = setInterval(() => {
        countdown.value--;
        if (countdown.value === 0) {
            disabled.value = false;
            clearInterval(intervalObj);
        }
    }, 100);
};
const disabledButton = () => {
    // 发送验证码逻辑
    disabled.value = true;
    countdown.value = 5;
    let data = qs.stringify({ phone: user.value.phone });
    axios
        .post("http://124.71.182.39:27000/passport/phone/Rcaptcha", data)
        .then((response) => {
            if (response.data.state === 20000) {
                // location.reload();
                ElMessage.success('注册成功');
            } else {
                ElMessage.error(response.data.message);
            }
        });

    const intervalObj = setInterval(() => {
        countdown.value--;
        if (countdown.value === 0) {
            disabled.value = false;
            clearInterval(intervalObj);
        }
    }, 100);

    // startCountdown();
};

watch(countdown, (newValue) => {
    if (newValue > 0 && sendBtn.value) {
        sendBtn.value.innerText = `重新操作 (${newValue})`;
    } else if (sendBtn.value) {
        sendBtn.value.innerText = "发送验证码";
    }
    // 将禁用时间保存到本地存储
    localStorage.setItem("countdown", String(newValue));
});
const reg = () => {
  let data = qs.stringify(user.value);
  axios.post('http://124.71.182.39:26000/user/register',data)
      .then((response)=>{
          if (response.data.state===2000){
            alert("注册成功");
            router.push('/login');
          }else {
              alert(response.data.message)
          }

      })
}

</script>

<style scoped>
.div-input{
    margin-bottom: 20px;
}
</style>